import React from 'react';
import { Layout, Menu, Message } from '@arco-design/web-react';
import { IconApps, IconCaretRight, IconCaretLeft } from '@arco-design/web-react/icon';
import Logo from './Logo';
import { listUserInfoAndMenu } from '../../mockApi/menu';
// import useNavigation from './rt.js'
import { useNavigate } from 'react-router-dom';

const MenuItem = Menu.Item;
const SubMenu = Menu.SubMenu;
const Sider = Layout.Sider;

console.log('listUserInfoAndMenu', listUserInfoAndMenu)


const NavigationWrapper = (props) => {
  const navigate = useNavigate();

  return <Side {...props} navigate={navigate} />;
};

class Side extends React.Component {
  state = {
    collapsed: false,
  };

  menus = listUserInfoAndMenu.userMenuList

  handleCollapsed = () => {
    this.setState({
      collapsed: !this.state.collapsed,
    });
  }

  clickMenu = (key) => {
    console.log('click menu--->', key)
    // const navigate = useNavigate()
    // navigate.push(key)
    this.props.navigate(key);
  }

  // 渲染菜单项
  renderMenuItems = (menuItems) => {
    console.log('menuItems', menuItems)
    return menuItems.map((item, index) => {
      if (item.children.length) {
        return <SubMenu
          key={item.linkUrl}
          title={
            <>
              <IconApps /> {item.name}
            </>
          }
        >
          {this.renderMenuItems(item.children)}
        </SubMenu>
      } else {
        return <MenuItem key={item.linkUrl}>{item.name}</MenuItem>
      }
    })
  }

  // 渲染函数
  render () {
    return (
      <Sider
        collapsed={this.state.collapsed}
        onCollapse={this.handleCollapsed}
        collapsible
        trigger={this.state.collapsed ? <IconCaretRight /> : <IconCaretLeft />}
        breakpoint='xl'
        className='h-full'
      >
        <Logo collapsed={this.state.collapsed} />

        <Menu
          defaultOpenKeys={['1736666066247950338']}
          onClickMenuItem={this.clickMenu}
          style={{ width: '100%' }}
        >
          {this.renderMenuItems(this.menus)}
        </Menu>
      </Sider>
    )
  }
}

export default NavigationWrapper